import React from 'react'
import { Divider, message, Row, Spin } from 'antd'
import AssignmentsBasicQuizzesOverviewBox from './assignments-basic-quizzes-overview-box'
import AssignmentsBasicQuizzesStatusBox from './assignments-basic-quizzes-status-box'
import TagSelectBox from '../../../../common/tag-select-box'
import { convertContent } from '../../../../../constant/lang-util'
import RefreshTool from '../../../../common/refresh-tool'
import {
  getAssignmentBasicQuizzesStatus,
  getAssignmentsBasicQuizzesOverview,
  getAssignmentsBasicQuizzesStatusByTag
} from '../../../../../actions/program'
import { getStudentTagsByProgramId } from '../../../../../actions/student-tag'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

class AssignmentsBasicQuizzesBody extends React.Component {
  state = {
    isOverviewShow: true,
    currentAssignment: '',
    assignmentId: -1,
    spinning: true,
    tutorId:-1
  }
  componentDidMount = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.props.getStudentTagsByProgramId(programId)
    if (user.id > 0) {
      this.props.getAssignmentsBasicQuizzesOverview(programId, user.id, `学员客观题总览`, () => {
        this.setState({spinning: false,programId,tutorId:user.id})
      })
    }

  }
  componentWillReceiveProps = nextProps => {
    const {user} = nextProps
    if (this.props.user === user ) {
      return false
    }
    const {programId} = this.props.match.params
    this.props.getAssignmentsBasicQuizzesOverview(programId, user.id, `学员客观题总览`, () => {
      this.setState({spinning: false,programId,tutorId:user.id})
    })
  }

  refreshAssignmentsBasicQuizzesOverview = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.setState({spinning: true})
    this.props.getAssignmentsBasicQuizzesOverview(programId, user.id, `学员客观题总览`, () => {
      this.setState({spinning: false})
    },false)
  }
  filter = assignmentsBasicQuizzesOverview => {
    return assignmentsBasicQuizzesOverview.data.filter(item => !!item.assignmentId)
  }

  getAssignmentsBasicQuizzesStatus = (item) => {
    const {assignmentId, assignmentTitle, taskTitle} = item
    const {programId, tutorId} = this.state
    this.setState({spinning: true})
    this.props.getAssignmentsBasicQuizzesStatus(programId, assignmentId, tutorId, `学员客观题作业完成情况`, () => {
      this.setState({
        spinning: false,
        assignmentId,
        isOverviewShow: false,
        currentAssignment: `${taskTitle}- ${assignmentTitle}`
      })
    })
  }
  getAssignmentsBasicQuizzesStatusByTag = tagId => {
    const {programId, tutorId,assignmentId} = this.state
    this.setState({spinning: true})
    if (tagId === 'all') {
      this.props.getAssignmentsBasicQuizzesStatus(programId, assignmentId, tutorId, `学员客观题作业完成情况`, () => {
        this.setState({spinning: false})
      })
      return
    }
    this.props.getAssignmentsBasicQuizzesStatusByTag(programId, assignmentId, tutorId, tagId, `学员客观题作业完成情况-byTag`, () => {
      this.setState({spinning: false})
    })
  }
  resetStatus = () => {
    this.setState({currentAssignment: '', isOverviewShow: true})
  }

  exportExcel = () => {
    const {tutorId, programId} = this.props
    const currentAssignmentId = this.getCurrentAssignmentId()

    window.location.href = `/learn/program-center/api/myStudents/types/${'学员客观题总览-byAssignment'}/programs/${programId}/assignments/${currentAssignmentId}/tutors/${tutorId}/exportExcel`
    message.info('Exporting, please waiting...')
  }

  render () {
    const {isOverviewShow, spinning, currentAssignment,programId,tutorId} = this.state
    const {assignmentsBasicQuizzesStatus, userTags, assignmentsBasicQuizzesOverview} = this.props

    return <Spin size="large" spinning={spinning} tip='loading'>

      {isOverviewShow
        ? <div>
          <Row type='flex' justify='space-between'>
            <RefreshTool
              refresh={this.refreshAssignmentsBasicQuizzesOverview}
              refreshTime={assignmentsBasicQuizzesOverview.refreshTime}
            />
          </Row>
          <Divider/>
          <AssignmentsBasicQuizzesOverviewBox
            programId={programId}
            tutorId={tutorId}
            assignmentsBasicQuizzesOverview={this.filter(assignmentsBasicQuizzesOverview)}
            getAssignmentsBasicQuizzesStatus={this.getAssignmentsBasicQuizzesStatus}
          />
        </div>
        : <span>
          <Row type='flex' justify='space-between'>
          <a onClick={this.resetStatus}>
            {convertContent('返回')} | {currentAssignment}
        </a>
          <span>Tag: <TagSelectBox
            tags={userTags}
            handleChange={this.getAssignmentsBasicQuizzesStatusByTag}/>
          </span>
          </Row>
        <Divider/>
        <AssignmentsBasicQuizzesStatusBox
          assignmentsBasicQuizzesStatus={assignmentsBasicQuizzesStatus.data}
        />
      </span>

      }
    </Spin>

  }
}
const mapStateToProps = ({assignmentsBasicQuizzesOverview,assignmentsBasicQuizzesStatus,userTags, user}) => ({
  assignmentsBasicQuizzesOverview,assignmentsBasicQuizzesStatus, user,userTags
})
const mapDispatchToProps = dispatch => ({
  getAssignmentsBasicQuizzesStatus: (programId, assignmentId, tutorId, type, callback,fromCache) => dispatch(getAssignmentBasicQuizzesStatus(programId, assignmentId, tutorId, type, callback,fromCache)),
  getAssignmentsBasicQuizzesStatusByTag: (programId, assignmentId, tutorId, tagId, type, callback) => dispatch(getAssignmentsBasicQuizzesStatusByTag(programId, assignmentId, tutorId, tagId, type, callback)),
  getAssignmentsBasicQuizzesOverview: (programId, tutorId, type, callback,formCache) => dispatch(getAssignmentsBasicQuizzesOverview(programId, tutorId, type, callback,formCache)),
  getStudentTagsByProgramId: programId => dispatch(getStudentTagsByProgramId(programId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentsBasicQuizzesBody))
